<template>
  <div>
    <!-- 弹框，增加/修改角色 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="50%"
      @close="close"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="140px"
        :rules="formRules"
      >
        <el-form-item label="角色名称" required>
          <el-input v-model="formData.name" prop="name" />
        </el-form-item>
        <el-form-item label="角色描述" required>
          <el-input v-model="formData.description" prop="description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { addRoleInfo, editRoleInfo } from '@/api/settings'
export default {
  name: 'AddRole',
  data() {
    return {
      isShow: false, // 弹框控件
      formData: { // 表单变量
        name: '',
        description: ''
      },
      formRules: { // 表单验证
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  methods: {
    // 新增/修改角色
    async btnOK() {
      // 只有校验通过，才会执行await下方的内容
      try {
        await this.$refs.form.validate()
        if (this.formData.id) {
          // 编辑
          await editRoleInfo(this.formData)
        } else {
          // 新增
          await addRoleInfo(this.formData)
        }
        // 重新拉去数据
        this.$emit('update')
        this.$message.success('操作成功')
        this.isShow = false
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭清空弹框,清空内容
    close() {
      this.fromData = {}
      this.$refs.form.clearValidate()
      this.isShow = false
    }
  }
}
</script>
<style></style>
